<template>
<div>
  
  <nav-bar>
      <template v-slot:default>网上商城</template>
  </nav-bar>
  <banner :bannerdata="banners"></banner>
  <recommend :recommends="recommends"></recommend>
  <tab-control @tabclick="tabclick" :titles="titles"></tab-control>
  <good-list :goods="showGoods"></good-list>

</div>
</template>

<script>
import { reactive, toRefs, ref, computed } from 'vue'
import NavBar from '../../components/common/navbar/NavBar.vue'
import recommend from '../home/Recommend.vue'
import banner from './Banner.vue'
import TabControl from '../../components/content/TabControl.vue'
import GoodList from '../../components/content/GoodsList.vue'
export default {
  components:{
    NavBar, 
    recommend,
    banner,
    TabControl,
    GoodList
  },
    setup () {
        const state = reactive({
            banners: [
              require('img/0.jpg'),
              require('img/1.jpg'),
              require('img/2.jpg'),
              require('img/3.jpg')
              // require('img/4.jpg')
            ],
            recommends: [
              {
                url: require('../../assets/images/book.jpg'),
                title: '轻松学Web'
              },
              {
                url: require('../../assets/images/book1.jpg'),
                title: 'CSS+Html5'
              },
              {
                url: require('../../assets/images/book2.png'),
                title: 'Node.js'
              },
              {
                url: require('../../assets/images/book3.jpg'),
                title: '轻松学Python'
              },
              {
                url: require('../../assets/images/book4.jpg'),
                title: 'CSS+HTML5'
              }
            ],
            titles: [
              {
                tname: 'first',
                title: '图书音像'
              },
              {
                tname: 'seconde',
                title: '数码产品'
              },
              {
                tname: 'third',
                title: '运动设备'
              },
            ]

        })
        const goods = reactive({
          sales:{
            list: [
              {
                id: 1,
                url: require('../../assets/images/book.jpg'),
                title: '轻松学Web',
                price: 88,
                collectcount: 58

              },
              {
                id: 2,
                url: require('../../assets/images/book1.jpg'),
                title: 'CSS+Html5',
                price: 68,
                collectcount: 10
              },
              {
                id: 3,
                url: require('../../assets/images/book2.png'),
                title: 'Node.js',
                price: 45,
                collectcount: 8
              },
              {
                id: 4,
                url: require('../../assets/images/book3.jpg'),
                title: '轻松学Python',
                price: 73,
                collectcount: 24
              },
              {
                id: 5,
                url: require('../../assets/images/book4.jpg'),
                title: 'CSS+HTML5',
                price: 66,
                collectcount: 34
              }
            ]
          },
          new:{
          list: [
              
              {
                id: 4,
                url: require('../../assets/images/book3.jpg'),
                title: '轻松学Python',
                price: 73,
                collectcount: 24
              },
              {
                id: 5,
                url: require('../../assets/images/book4.jpg'),
                title: 'CSS+HTML5',
                price: 66,
                collectcount: 34
              },
              {
                id: 1,
                url: require('../../assets/images/book.jpg'),
                title: '轻松学Web',
                price: 88,
                collectcount: 58

              },
              {
                id: 2,
                url: require('../../assets/images/book1.jpg'),
                title: 'CSS+Html5',
                price: 68,
                collectcount: 10
              },
              {
                id: 3,
                url: require('../../assets/images/book2.png'),
                title: 'Node.js',
                price: 45,
                collectcount: 8
              }
            ]
          },
          recommend:{
            list: [
              {
                id: 3,
                url: require('../../assets/images/book2.png'),
                title: 'Node.js',
                price: 45,
                collectcount: 8
              },
              {
                id: 4,
                url: require('../../assets/images/book3.jpg'),
                title: '轻松学Python',
                price: 73,
                collectcount: 24
              },
              {
                id: 5,
                url: require('../../assets/images/book4.jpg'),
                title: 'CSS+HTML5',
                price: 66,
                collectcount: 34
              },
              {
                id: 1,
                url: require('../../assets/images/book.jpg'),
                title: '轻松学Web',
                price: 88,
                collectcount: 58

              },
              {
                id: 2,
                url: require('../../assets/images/book1.jpg'),
                title: 'CSS+Html5',
                price: 68,
                collectcount: 10
              }
              
            ]
          }
        })
        let currentType = ref('sales')
        const showGoods = computed(() => {
          return goods[currentType.value]
        })
        const tabclick = (index) =>{
          let types =['sales','new','recommend']
          currentType.value =types[index]
        }
        return {
            ...toRefs(state),
            ...toRefs(goods),
            tabclick,
            showGoods
            
        }
    }
}
</script>

<style scoped>
.banners{
  width: 100%;
  height: auto;
  margin-top: 45px;
}
</style>